    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画封装之div滑动</title>
        <style type="text/css">
           *{
               margin:0;
               padding: 0;
           }
           button{
               margin-left: 20px;
               margin-top: 10px;
               margin-bottom: 10px;
           }
            #big{
               background-color: #cccccc;
               width: 800px;
               height: 200px;
                position: relative;
           }
            #child{
                height: 100px;
                width: 100px;
                background-color: #990099;
                position: absolute;
            }
        </style>
    </head>
    <body>
    <div id="big">
        <button>移动到200</button>
        <button>移动到500</button>
        <div id="child"></div>
    </div>
    <script>
        //需求：1.点击200按钮块缓慢移动到指定位置
        //     2.点击400按钮块缓慢移动到指定位置
        //     3.200按钮与400按钮切换时候可以切换过来
        //1.寻找事件源，绑定事件
        var btn1=document.getElementsByTagName("button")[0];
        var btn2=document.getElementsByTagName("button")[1];
        var chld=document.getElementById("child");
        var timer=null;
        btn1.onclick=function () {
            timer=setInterval(function () {
            chld.style.left=chld.offsetLeft+10+"px";
//            console.log(chld.style.left);
                if (chld.offsetLeft===200){
                    alert("1");
                    clearInterval(timer);
                }
            },30);
        }
        btn2.onclick=function () {
            timer=setInterval(function () {
                chld.style.left=chld.offsetLeft+10+"px";
//            console.log(chld.style.left);
                if (chld.offsetLeft===400){
                    alert("400");
                    clearInterval(timer);
                }
            },30);
        }

       function animate() {
           timer=setInterval(function () {
               chld.style.left=chld.offsetLeft+10+"px";
           console.log(chld.style.left);
               if (chld.offsetLeft===400){
                   alert("400");
                   clearInterval(timer);
               }
           },30);
       }












    </script>
    </body>
    </html>